<script lang="ts" setup>
import { provide, ref, watch } from 'vue'

interface Props {
  value: any
}

const props = defineProps<Props>()
const emit = defineEmits(['update:value'])

const selectedValue = ref(props.value)

watch(
  () => props.value,
  (newValue) => {
    selectedValue.value = newValue
  }
)

watch(selectedValue, (newValue) => {
  emit('update:value', newValue)
})

const updateValue = (value: any) => {
  selectedValue.value = value
}

provide('radioGroup', {
  selectedValue,
  updateValue
})
</script>

<template>
  <div class="senior-radio-group">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.senior-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
